<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>公告</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .main {
      padding: 0 30px;
      box-sizing: border-box;
      background: #fff;
      padding-bottom: 30px;
    }
    
    [v-cloak] {
      display: none;
    }
    
    .ivu-table th {
      height: 65px;
      background: #fff;
    }

    .ivu-table-row td:first-child {
      width: 704px;
    }

    .table-w .ivu-table-wrapper {
      border: 0;
    }

    .table-notice {}

    .table-header {
      border-bottom: 2px solid #eee;
      padding: 26px 10px;
    }

    .table-notice .cell-left {
      display: inline-block;
      width: 704px;
    }
    .table-notice .cell-left.text {
      padding: 0 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .table-notice .label {
      font-size: 16px;
      color: #333;
    }

    .table-content {
      min-height: 270px;
      position: relative;
    }
    .table-content.none::before {
      content: '没有相关数据';
      display: block;
      text-align: center;
      color: #aaa;
      position: absolute;
      top: 160px;
      left: 0;
      right: 0;
      margin: auto;
    }
    .table-content.none::after {
      content: '';
      display: block;
      width: 73px;
      height: 70px;
      background: transparent url(images/no_data.png) no-repeat;
      color: #aaa;
      position: absolute;
      top: 80px;
      left: -8px;
      right: 0;
      margin: auto;
    }
    .table-content .list {
      height: 50px;
      line-height: 50px;
      color: #666;
      border-bottom: 1px solid #eee;
      text-indent: -4px;
    }
    .table-content .text {
      cursor: pointer;
    }
    .table-content .text:hover {
      color: #49a9ee;
    }
    .table-content .list i {
      margin-right: 2px;
      font-style: normal;
      color: #49a9ee;
    }
    .sp_titz {
      color: #49a9ee;
      margin-left: -7px;
    }
    .cell-right.date-time {
      vertical-align: 19px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="notice">
    <div class="main">
      <div class="table-notice">
        <div class="table-header">
          <span class="cell-left label">公告标题</span>
          <span class="cell-right label">发布时间</span>
        </div>
        <ul class="table-content" :class="{none: !noticeList.length}">
          <li class="list" v-for="(item,index) of noticeList" :key="index">
            <span class="cell-left text" @click="toNoticeDetail(item.id)"><span class="sp_titz" v-if="getSpTitle(item.title)">{{getSpTitle(item.title)}}</span>{{getNoticeTitle(item.title)}}</span>
            <span class="cell-right date-time">{{item.createTime}}</span>
          </li>
        </ul>
      </div>

      <div class="page-w" v-if="noticeList.length">
        <Page :total="sizeCount" :page-size="pageSize" :current="currentPage" @on-change="changePage" show-total show-elevator />
      </div>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        currentPage: 1,
        pageSize: 10,
        sizeCount: 0,
        columns1: [{
            title: '公告标题',
            key: 'title',
            render: (h, params) => {
              var text = params.row.title
              var url = params.row.url
              return h('a', {
                on: {
                  click() {
                    G.to(url)
                  }
                }
              }, text)
            },

          },
          {
            title: '发布时间',
            key: 'createTime',
            width: 220,
          },
        ],
        noticeList: []
      },
      methods: {
        init() {
          this.requestList()
        },
        // 提交数据
        requestList() {
          var realUrl = '/user/findnoticeRetlist';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/notice' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
          var data = G.paramsSerializer(ydata)
          // 立即提交
          axios.post(url, data, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                var list = res.data.data.listModel
                this.sizeCount = res.data.data.pageCount
                this.noticeList = list
                this.noticeList.forEach(cur => {
                  cur.createTime = G.getFormatTime(cur.createTime)
                })
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        toNoticeDetail(id) {
          localStorage.setItem('notic_detail_id', id);
          G.to('notice_detail' + '&' + id)
        },
        changePage(page) {
          this.currentPage = page
          this.requestList()
        },
        getSpTitle(text) {
          return /【.+】/.test(text) && text.match(/【.+】/).toString()
        },
        getNoticeTitle(text) {
          return text.replace(/.*【.*】(.+)/, '$1')
        },
      },
      computed: {
        
      },
      mounted() {
        this.init()
      }

    })
  </script>
</body>

</html>